<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <h1>登录</h1>
      <p>用户名 : <input type="text" id="username"></p>
      <p>密&nbsp;&nbsp;&nbsp;码 : <input type="text" id="password"></p>
      <p><button id="btn">登录</button></p>

      <script>
            // # 目标 : 把用户的信息发送后端进行验证;
            // ajax : xhr 
            document.querySelector("#btn").onclick = function(){
                  // 1. 获取数据
                  var username_value = document.querySelector("#username").value;
                  var password_value = document.querySelector("#password").value;
                  // # 测试数据;
                  // console.log(username_value , password_value);

                  // 2. 数据交互 : 发送数据;
                  // 发请求 : xhr 发送 http 请求;
                  // 2.1 创建xhr对象;
                  // var xhr = new XMLHttpRequest();
                  // // 2.2 配置 xhr 对象;
                  // xhr.open( "POST" , "./07_project.php");
                  // // 2.3 发送 http 请求;
                  // xhr.send();
                  // // 2.4 接受请求的响应 ;
                  // xhr.onreadystatechange = function(){
                  //       if( xhr.readyState === 4){
                  //             console.log(xhr.responseText);
                  //       }
                  // }
                  // POST 请求如何携带数据 ;
                  // POST 请求数据放在了请求体之中;
                  // 在send之中传入 key=value&key=value 形式的字符串以发送数据; 

                  var data = "username=" + username_value + "&password=" + password_value;
                  
                  var xhr = new XMLHttpRequest();
                  // 2.2 配置 xhr 对象;
                  xhr.open( "POST" , "./07_project.php");
                  // 2.3 发送 http 请求;
                  // 如果要发送post请求，请一定在send之前加入请求头设置;
                  // 请求的内容类型换成 表格-url编码类型;
                  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

                  xhr.send(data);
                  // 2.4 接受请求的响应 ;
                  xhr.onreadystatechange = function(){
                        if( xhr.readyState === 4){
                              console.log(xhr.responseText);
                        }
                  }
                  // 因为在正常发送post请求的时候,会把所有的字符串原样进行发送，不会被解析，所以我们发送时需要注意设置请求头;
                  // 注意事项 : 请求头设置一定要正在send之前;

            }

      </script>
</body>
</html>